<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>校园跑腿</title>
  <meta name="description" content="校园跑腿"/>
  <meta name="keywords" content="校园跑腿"/>
  <meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
  <link rel="stylesheet" href="/css/amazeui.min.css"/>
  <link rel="stylesheet" href="/css/style.css"/>
  <script type="text/javascript" src="/js/jquery.min.js"></script>
  <script type="text/javascript" src="/js/amazeui.min.js"></script>
  <script type="text/javascript" src="/js/application.js" ></script>
  <style>
    body {
      background-color: #FCFCFC;
    }

    dl,
    dd {
      margin: 0;
    }

    #box {
      width: 850px;
      background: rgba(255, 255, 255, 0.8);
      box-shadow: 0 0 10px rgba(73,66,66,.1);
      margin: 50px auto;
      border: 1px solid #E5E5E5;
    }

    #box dl {
      height: 50px;
      line-height: 50px;
      border-bottom: 1px dashed #dadada;
      margin: 0 20px;
    }

    #box dt {
      float: left;
      color: #8a8a8a;
    }

    #box dd {
      float: left;
      color: #252525;
      margin: 0 10px;
      font-size: 14px;
      cursor: pointer;
    }

    #box dd.active {
      color: #c4284d;
      font-weight: bold;
    }

    #box dl.select {
      background: #efefef;
      margin: 0;
      padding: 0 20px;
    }

    #box dl.select dd{
      border: 1px solid #c4284d;
      height: 25px;
      line-height: 25px;
      margin-top: 13px;
      padding: 0 2px 0 10px;
      border-radius: 3px;background-color: #fff;
    }
    #box dl.select dd span{
      width: 20px;
      height: 20px;
      display: inline-block;
      text-align: center;
      line-height: 20px;
      background: #c4284d;
      color: #fff;
      margin-left: 10px;
      cursor: pointer;border-radius: 5px;
    }
    .popup-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.8);
      backdrop-filter: blur(10px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .popup-container {
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: rgba(255, 255, 255, 0.5);
      backdrop-filter: blur(10px);
      z-index: 9999;
      display: flex;
      align-items: center;
      justify-content: center;
      width: 100%;
      height: 100%;
    }
    .field-container {
      margin-bottom: 10px;
      box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
    }

    .field-container label {
      display: block;
      font-weight: bold;
    }

    .field-container input {
      width: 100%;
      padding: 8px;
      border: 1px solid #ccc;
      border-radius: 4px;
    }
    .confirm-button {
      background-color: #ccc;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }

    .confirm-button:hover {
      background-color: #6b6969;
    }

    .confirm-button:focus {
      outline: none;
    }
    .close-button {
      background-color: #ccc;
      color: white;
      border: none;
      padding: 10px 20px;
      border-radius: 4px;
      cursor: pointer;
    }

    .close-button:hover {
      background-color: #6b6969;
    }

    .close-button:focus {
      outline: none;
    }
    .success-message {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      padding: 10px 20px;
      background-color: rgba(76, 175, 80, 0.8);
      color: white;
      border-radius: 4px;
      opacity: 1;
      transition: opacity 1s ease-in-out;
    }

    .success-message.fade-out {
      opacity: 0;
    }
  </style>
</head>
<body>
<header data-am-widget="header" class="am-header am-header-default header">
  <div class="am-header-left am-header-nav">
    <a href="/user/mypage" class="">
      <i class="am-header-icon am-icon-angle-left"></i>
    </a>
  </div>
  <h1 class="am-header-title">返费<a href="#title-link" class="" style="color: #333;">我的发布</a></h1>
  <div class="am-header-right am-header-nav">
    <a href="#right-link" class=""> </a>
  </div>
</header>

<ul class="order-style">
  <li><a href="/order/myrelease">全部</a></li>
  <li><a href="/order/canceled">已取消</a></li>
  <li><a href="/order/seize">待抢单</a></li>
  <li class="current"><a href="/order/inprogress">进行中</a></li>
  <li><a href="/order/completed">已完成</a></li>
</ul>

<script>
  function getReceiveUserInfo(event, href) {
    event.preventDefault();
    var orderid = null;
    var result = '';

    if (href.includes('order')) {
      var lastIndex = href.lastIndexOf("/");
      result = href.substr(lastIndex + 1);
      orderid = result.split('&')[1];
      result = result.split('&')[0];
    } else {
      orderid = result.split('&')[1];
      result = result.split('&')[0];
    }

    var xhr = new XMLHttpRequest();
    xhr.open("POST", "/user/get_userInfo?UserID=" + result, true);
    xhr.onreadystatechange = function() {
      if (xhr.readyState === 4 && xhr.status === 200) {
        var user = JSON.parse(xhr.responseText);

        var popupContainer = document.createElement('div');
        popupContainer.classList.add('popup-container');

        var form = document.createElement('form');
        form.classList.add('popup-form');

        var closeButton = document.createElement('button');
        closeButton.classList.add('close-button');
        closeButton.innerHTML = '×';

        var confirmButton = document.createElement('button');
        confirmButton.classList.add('confirm-button');
        confirmButton.innerHTML = '联系';

        form.appendChild(closeButton);
        form.appendChild(confirmButton);

        var fieldConfig = [
          { label: '账号', property: 'userId' },
          { label: '姓名', property: 'userName' },
          { label: '电话号码', property: 'phoneNumber' },
        ];

        fieldConfig.forEach(function(field) {
          var fieldContainer = document.createElement('div');
          fieldContainer.classList.add('field-container');

          var fieldLabel = document.createElement('label');
          fieldLabel.textContent = field.label;

          var fieldValue = document.createElement('input');
          fieldValue.setAttribute('type', 'text');
          fieldValue.setAttribute('readonly', 'true');
          fieldValue.value = user[field.property];

          fieldContainer.appendChild(fieldLabel);
          fieldContainer.appendChild(fieldValue);

          form.appendChild(fieldContainer);
        });

        popupContainer.appendChild(form);
        document.body.appendChild(popupContainer);

        closeButton.addEventListener('click', function() {
          document.body.removeChild(popupContainer);
        });

        confirmButton.addEventListener('click', function(event) {
          event.preventDefault();
          // 创建接单成功消息框
          var successMessage = document.createElement('div');
          successMessage.textContent = '联系成功！';
          successMessage.classList.add('success-message');
          popupContainer.appendChild(successMessage);



          // 添加 CSS 类以实现渐隐效果
          setTimeout(function() {
            successMessage.classList.add('fade-out');
          }, 1000);

          // 延迟一段时间后跳转到指定页面
          setTimeout(function() {
            window.location.replace('/order/inprogress');
            // window.location.href = '/order/inprogress';
          }, 2000);
        });
      }
    };
    xhr.send();
  }

</script>
<!--列表,循环-->
<div class="c-comment-list" style="border: 0;">
  <div th:each="orderForm:${orderFormList}">
    <div class="c-comment">
      <!--    th:text = "${order_id}"-->
      <span class="c-comment-num">订单编号：<span th:text="${orderForm.orderId}"/></span>
      <span class="c-comment-suc">进行中</span>
    </div>
  <div class="o-con" >
    <div class="am-intro-left am-u-sm-3"><img src="/img/p.png"/></div>
    <div class="o-con-txt">
      <span th:text="${orderForm.type}"></span>
      <p style="color: gray;margin-top: 2px;font-size: 12px"><span th:text="${orderForm.billTime}"/></p>
      <span style="color: gray;margin-top: 2px;font-size: 12px" th:text="${orderForm.deadLine}"></span>
      <p class="price" style="font-size: 14px"><span th:text="${orderForm.remark}"/></p>
    </div>
    <div class="o-con-much"><h4></h4></div>

  </div>

    <div class="c-com-btn">
      <a th:href="@{/order/finishorder1(orderid=${orderForm.getOrderId()})}">完成订单</a>
      <a th:href="@{/order/deleteOrder3(orderid=${orderForm.getOrderId()})}">取消订单</a>
      <a th:href="${orderForm.getReceiveUser().getUserId()}" onclick="getReceiveUserInfo(event,this.href)">联系接单员</a>
      <a th:unless="${orderForm.orderStatus == 5}" th:href="@{/order/complain(orderid=${orderForm.orderId})}">投诉</a>
      <span th:if="${orderForm.orderStatus == 5}">受理中</span>
    </div>

  </div>
</div>


</body>
</html>
